<template>
  <div class="container">
    <!-- <el-button type="primary" @click="dows">导出</el-button> -->
    <div
      class="content"
      v-for="(item, index) in list"
      :key="index"
      @click="gotoList(item)"
    >
      <div
        style="
          position: absolute;
          top: 40px;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: #1890ff;
          line-height: 50px;
          text-align: center;
          font-size: 20px;
          color: white;
        "
      >
        <div>{{ item.factoryCode }}</div>
      </div>
      <div style="position: absolute; margin-left: 20px; top: 20px; left: 60px">
        <div style="font-size: 18px; line-height: 30px">{{ item.factoryName }}</div>
        <div class="font1">工厂代码：{{ item.factoryCode }}</div>
        <div class="font1">地址：{{ item.factoryAddress }}</div>
        <!-- <div class="font1">地址：12sadas 撒大声地啊实打实的阿萨德阿萨德阿萨德啊实打实的sad阿斯</div> -->
      </div>
    </div>
    <!-- <div class="content">
            
        </div> -->
  </div>
</template>

<script>
import { manage_findAll,materialBreed_export as materialBreedExport } from "@/request/manageapi";
import axios from "axios";

export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      manage_findAll("").then((res) => {
        this.list = res.data;
      });
    },
    gotoList(data) {
      console.log(data);
      let { id } = data;
      this.$router.push({
        path: "/informationfactory/informationfactory",
        query: {
          id,
        },
      });
    },
    dows() {
      // let token = localStorage.getItem("token");
      axios
        .request({
          url:"http://localhost:8081/api/materialBreed/export",
          responseType: "blob",
          method: "post",
          data:{"companyId":"345433157dc1b5c6017dc221f9hyded1"}

        })
        .then((res) => {
          //此处有个坑。这里用content保存文件流，最初是content=res，但下载的test.xls里的内容如下图1，
          //检查了下才发现，后端对文件流做了一层封装，所以将content指向res.data即可
          //另外，流的转储属于浅拷贝，所以此处的content转储仅仅是便于理解，并没有实际作用=_=
          const content = res.data;
          const blob = new Blob([content]); //构造一个blob对象来处理数据
          const fileName = "excel.xlsx";

          //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
          //IE10以上支持blob但是依然不支持download
          if ("download" in document.createElement("a")) {
            //支持a标签download的浏览器
            const link = document.createElement("a"); //创建a标签
            link.download = fileName; //a标签添加属性
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click(); //执行下载
            URL.revokeObjectURL(link.href); //释放url
            document.body.removeChild(link); //释放标签
          } else {
            //其他浏览器
            navigator.msSaveBlob(blob, fileName);
          }
        })
        .catch((err) => {
          console.log(err);
        });
      
    },
  },
};
</script>

<style scoped>
.container {
  min-height: 65%;
}
.content {
  position: relative;
  display: inline-block;
  width: 270px;
  height: 160px;
  border: 1px solid #999;
  border-radius: 4px;
  overflow: hidden;
  margin: 20px;
  cursor: pointer;
}
.font1 {
  font-size: 14px;
  line-height: 30px;
  color: #999;
}
</style>
